<template>
  <div class="seach" style="margin: 40px 0">
    <!-- 搜索框 -->
    <el-select
      v-model="value"
      multiple
      filterable
      remote
      reserve-keyword
      placeholder="请输入关键词"
      :remote-method="remoteMethod"
      :loading="loading"
      style="width: 350px"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <!-- 搜索按钮 -->
    <el-button icon="el-icon-search" style="margin: 0 10px"></el-button>
    <!-- 添加项目 -->
    <el-button type="primary" @click="addStu" v-has="'add'" :disabled="disabled"
      >添加项目</el-button
    >
    <!-- 下拉菜单 -->
    <el-form style="margin: 40px 0">
      <el-form-item label="选择班级:">
        <el-select
          v-model="value"
          filterable
          placeholder="请选择"
          @visible-change="classVisible"
          @change="classChange"
        >
          <el-option label="全部" value="all"></el-option>
          <el-option
            v-for="(item, index) in classOptions"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <!-- 导出excel表格 -->
    <div id="excell" @click="exportExcel">
      <svg class="icon" aria-hidden="true" style="">
        <use xlink:href="#icon-excel"></use>
      </svg>
      <span class="excell-span">导出excel表格</span>
    </div>
    <!-- 表格 -->
    <el-table :data="tableData" border style="width: 100%" v-loading="loading">
      <el-table-column prop="headimgurl" label="头像">
        <template slot-scope="scope">
          <el-avatar
            shape="square"
            :size="50"
            fit="fill"
            :src="scope.row.headimgurl"
          ></el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="class" label="班级"> </el-table-column>
      <el-table-column prop="productUrl" label="项目"> </el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button
            type="primary"
            icon="el-icon-view"
            class="btn"
            @click="$router.push({ path: '/StudentManager/Detail' })"
            >查看</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-edit"
            class="btn"
            v-has="'edit'"
            @click="editStu(row)"
            >编辑</el-button
          >
          <el-button
            type="danger"
            icon="el-icon-delete"
            class="btn"
            v-has="'delete'"
            @click="deleteStu(row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination background layout="prev, pager, next" :total="100">
      </el-pagination>
    </div>
    <dialogs></dialogs>
  </div>
</template>

<script>
/* 引入vuex中的权限按钮数组 */
import { mapState } from "vuex";
/* 添加项目组件 */
import dialogs from "../../components/dialogs.vue";
/* 接口 */
import {
  addStuApi,
  editStuApi,
  getstulistApi,
  delStuApi,
  getclassesApi,
} from "../../api";
/* excel表格 */
import qee from "qf-export-excel";
export default {
  computed: {
    ...mapState(["userButtons"]),
  },
  directives: {
    has: {
      inserted: (el, binding, vnode) => {
        //console.log(binding);
        let permissionField = binding.value;
        /* console.log(vnode.context.userButtons); */
        let hasFlag = vnode.context.userButtons.includes(permissionField);
        if (!hasFlag) {
          el.disabled = true;
          el.style.background = "#a0cfff";

          let oldClassName = el.calssName;
          el.calssName = oldClassName + " " + "is-disabled";
        }
      },
    },
  },
  components: { dialogs },
  data() {
    return {
      value: [],
      list: [],
      loading: false,
      disabled: false,
      dataCount: 5,
      classOptions: [],
      /* 搜索框数据 */
      states: [
        "Alabama",
        "Alaska",
        "Arizona",
        "Arkansas",
        "California",
        "Colorado",
        "Connecticut",
        "Delaware",
        "Florida",
        "Georgia",
        "Hawaii",
        "Idaho",
        "Illinois",
        "Indiana",
        "Iowa",
        "Kansas",
        "Kentucky",
        "Louisiana",
        "Maine",
        "Maryland",
        "Massachusetts",
        "Michigan",
        "Minnesota",
        "Mississippi",
        "Missouri",
        "Montana",
        "Nebraska",
        "Nevada",
        "New Hampshire",
        "New Jersey",
        "New Mexico",
        "New York",
        "North Carolina",
        "North Dakota",
        "Ohio",
        "Oklahoma",
        "Oregon",
        "Pennsylvania",
        "Rhode Island",
        "South Carolina",
        "South Dakota",
        "Tennessee",
        "Texas",
        "Utah",
        "Vermont",
        "Virginia",
        "Washington",
        "West Virginia",
        "Wisconsin",
        "Wyoming",
      ],
      /* 下拉框数据 */
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      value: "",
      /* 表格数据 */
      tableData: [],
    };
  },

  mounted() {
    //console.log(this.userButtons);
    /* 搜索框方法 */
    this.list = this.states.map((item) => {
      return { value: `value:${item}`, label: `label:${item}` };
    });
    /* 接受添加项目事件事件 */
    this.$bus.$on("addStuing", (params) => {
      this.addStuRequest(params);
    });
    /* 接受 编辑项目事件*/
    this.$bus.$on("editStuing", (params) => {
      this.editStuRequest(params);
    });
    this.updateStuTable();
  },
  methods: {
    /* 下拉框 */
    classVisible(isVisible) {
      if (isVisible) {
        // console.log(1);
        getclassesApi().then((res) => {
          //console.log(res);
          this.classOptions = res.data.data;
         /*  console.log(this.classOptions); */
        });
      }
    },
    /* 选择班级 */
    classChange(query) {
      // console.log("======", query);
      //如果query是all代表要显示所有的数据,后台的设定是,class字段传空字符串就返回所有班级的数据,所以一下用一个三元表达式来处理
      console.log(query);
      if (query !== "all") {
        this.updateStuTable("", "", query);
      } else {
        this.updateStuTable();
      }
    },

    /* 导出excel表格 */
    exportExcel() {
      let titleList = [
        {
          title: "头像地址",
          key: "headimgurl",
        },
        {
          title: "姓名",
          key: "name",
        },
        {
          title: "班级",
          key: "calss",
        },
        {
          title: "项目",
          key: "productUrl",
        },
      ];
      let dataSource = [...this.tableData];
      qee(titleList, dataSource, "学院数据");
    },
    /* 删除方法 */
    deleteStu(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let sId = row.sId;
          delStuApi(sId).then((res) => {
            //console.log(res)
            if (res.data.state) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.updateStuTable();
            } else {
              this.$message.error("删除错误,数据可能已经被删除");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    /* 下拉框方法 */
      remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.options = this.list.filter((item) => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.options = [];
      }
    }, 
    /* 更新数据方法 */
    updateStuTable(page = "", count = "", classes = "") {
      this.loading = true;
      getstulistApi(page, count, classes).then((res) => {
        let data = res.data.data;
        if (res.data.state) {
          this.loading = false;
          this.tableData = data;
        }
      });
    },

    /* 添加项目 */
    addStu() {
      this.$bus.$emit("add-Stu");
    },
    /* 编辑项目 */
    editStu(row) {
      let row1 = { ...row };
      this.$bus.$emit("edit-Stu", row1);
    },
    /* 请求添加数据方法 */
    addStuRequest(params) {
      addStuApi(params).then((res) => {
        if (res.data.state) {
          this.updateStuTable();
        }
      });
    },
    /* 编辑学员求情数据 */
    editStuRequest(params) {
      editStuApi(params).then((res) => {
        if (res.data.state) {
          this.updateStuTable();
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
#excell {
  float: right;
  margin-right: 20px;
  margin-bottom: 20px;
  border: 1px solid gray;
  border-radius: 4px;
  padding: 2px;

  &/deep/.icon {
    font-size: 20px !important;
    cursor: pointer;
  }
  span {
    color: grey;
    font-size: 16px;
    cursor: pointer;
  }
}
&/deep/.cell {
  display: flex;
}
.btn {
  width: 60px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2px;
  font-size: 8px;
}
&/deep/.cell {
  text-align: center !important;
}
.pagination {
  width: 100%;
  text-align: center;
  margin: 30px 0;
}
</style>